<template>
	<view :class="['store_information', isExpand?'expand_container':'not_expand_container']">
		<!-- 顶部 -->
		<view class="info">
			<view class="name" @click="toSelect">
				<text class="shop_name">{{storeInfo.ShopName || '哎哟，没有你的店铺'}} </text>
				<text style="margin-left: 20rpx;font-weight: normal; color: orange; font-size: 24rpx; white-space: nowrap;">{{storeInfo.isFirst?'最近':''}}</text>
			</view>
			<view class="flex"><text>设备状态：{{storeInfo.IsState=='true'?'在线':'离线'}}</text> </view>
			<view class="flex sb">
				<view class="address">
					<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/geolocation.png" mode=""></image>
					<text style="flex: 1;">
						{{ storeInfo.Address || '没有你的店铺地址哦' }}
					</text>
				</view>
				<view @click="toStore"
					style="display: flex; align-items: center; min-width: 170rpx; justify-content: flex-end;">
					<text>
						{{storeInfo.Distance|| 0}}km
					</text>
					<image class="right_arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/right_arr_white.png"
						mode=""></image>
				</view>
			</view>
		</view>
		<!-- 下面 -->
		<view class="bottom" v-if="showDetail">
			<!-- <text  v-if="storeInfo.BusinessHours">营业时间：{{storeInfo.BusinessHours}}</text> -->
			<view class="address" style="margin-bottom: 20rpx;">
				<image  src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/upload/17269108622991134.png" mode=""></image>
				<text @click="telFun">联系方式：{{storeInfo.ServerPhone|| ''}}</text>
			</view>
			
			<text>{{storeInfo.Description|| ''}}</text>
			
		</view>
		<!-- 价目表 -->
		<view class="price" @click="toPrice">
			<text>价目表</text>
			<image class="right_arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/right_arr_blue.png" mode="">
			</image>
		</view>
		<!-- 收放箭头 -->
		<image :class='["arr_release",isExpand?"expand":"not_expand"]'
			src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/right_arr_white.png" mode="" @click="Expand"></image>
	</view>
</template>

<script>
	export default {
		name: "storeInformation",
		props: {
			storeInfo: {
				default: {},
				typeof: Object
			},
			isMember: {
				default: false,
				typeof: Boolean
			}
		},
		data() {
			return {
				// 是否展开详情信息
				isExpand: false,
				// 因为0.5s延迟，避免突然消失
				showDetail: false
			};
		},
		methods: {
			toSelect() {
				uni.switchTab({
					url: `/pages/tab/gift`
				})
			},
			returnDistace(distance) {
				if (distance) {
					if (distance >= 1000) {
						// 将米转换为公里，并保留两位小数
						const kilometers = (distance / 1000).toFixed(2);
						return `${kilometers} km`;
					} else {
						// 保留原始米数
						return `${distance} m`;
					}
				} else {
					return 'N/A';
				}

			},
			telFun(){
				let that=this
				uni.makePhoneCall({
					phoneNumber: that.storeInfo.ServerPhone,
					success() {
						console.log('拨号成功');
					},
					fail(err) {
						console.error('拨号失败:', err);
					},
				});
			},
			Expand() {
				this.isExpand = !this.isExpand
				// 因为0.5s延迟，避免突然消失，延时器v-if
				if (this.showDetail) {
					// setTimeout(() => {
						this.showDetail = false
					// }, 500)
				} else {
					this.showDetail = true
				}

			},
			// 导航到店铺
			toStore() {
				uni.openLocation({
					latitude: this.storeInfo.Latitude,
					longitude: this.storeInfo.Longitude,
					success: function() {

					}
				});
			},
			toPrice() {
				// 价目表
				console.log(321654);
				uni.navigateTo({
					url: `/pages/priceList/index`
				})
			}
		},
		onLoad() {
			// 获取现在的定位，以便于获取店铺
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});

		}
	}
</script>

<style lang="scss" scoped>
	.address {
		display: flex;
		align-items: center;

		max-width: 488rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		text {
			// display: -webkit-box;
			// -webkit-box-orient: vertical;
			// -webkit-line-clamp: 1;
			// /* 1行文本显示省略号 */
			// overflow: hidden;
			// text-overflow: ellipsis;
		}
	}

	.expand_container {
		// min-height: 388rpx;
	}

	.not_expand_container {
		// height: 230rpx;
	}

	.arr_release {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		bottom: 24rpx;
		right: 50%;
		margin: 0 auto;
		transition: 0.5s;
	}

	.expand {
		transform: rotate(-90deg);
	}

	.not_expand {
		transform: rotate(90deg);
	}

	.right_arr {
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}

	.price {
		position: absolute;
		width: 146rpx;
		height: 48rpx;
		background: #F3F6FF;
		border-radius: 200rpx 0rpx 0rpx 200rpx;
		right: 0;
		top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			color: #2E81F7 !important;
			font-size: 24rpx;
		}
	}

	.bottom {
		display: flex;
		margin-top: 24rpx;
		flex-direction: column;
		box-sizing: content-box;
		    padding-bottom: 50rpx;
		text {
			color: #FFFFFF;
			margin-bottom: 20rpx;
			&:nth-last-child(1){
				margin-bottom: 0;
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.sb {
		justify-content: space-between;
		align-items: end;
	}



	.info {
		display: flex;
		flex-direction: column;
		border-bottom: 1rpx solid #96CFFF;
		
	}

	.store_information {
		position: relative;
		width: 702rpx;
		// height: 450rpx;
		transition: 0.5s;
		overflow: hidden;
		box-sizing: border-box;
		padding: 32rpx 32rpx 69rpx 32rpx;
		background: linear-gradient(162deg, #3F81F0 0%, #66B4F7 100%);
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 24rpx;

		.name {
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 24rpx;
			display: flex;
			// align-items: center;
			.shop_name{
				max-width: 440rpx;
				overflow: hidden;
				// white-space: nowrap;
				text-overflow: ellipsis;
			}

			image {
				width: 76rpx;
				height: 28rpx;
				margin-left: 8rpx;
			}

		}

		text {
			color: white;
			font-size: 28rpx;
		}
	}
</style>